@height-item: calc((100vh - 180px) / 8);
.transfrom-class {
  transition: 0.75s;
}
.font-style {
  font-size: 24px;
  color: white;
}
.middle-box {
  width: 100%;
  .transfrom-class();
  .middel-box-item {
    position: relative;
    height: @height-item;
    line-height: @height-item;
    display: flex;
    justify-content: flex-end;
    .font-style();
  }
  .middel-box-item1 {
    background-color: rgba(49, 98, 232, 0.8);
  }
  .middel-box-item2 {
    background-color: rgba(41, 82, 194, 0.8);
  }
  .middel-box-item3 {
    background-color: rgba(31, 62, 147, 0.8);
  }
  .middel-box-item4 {
    background-color: rgba(19, 39, 92, 0.8);
  }
  .middel-box-item5 {
    background-color: rgba(81, 90, 135, 0.8);
  }
  .middel-box-item6 {
    background-color: rgba(107, 117, 161, 0.9);
  }
  .middel-box-item7 {
    background-color: rgba(118, 128, 171, 0.9);
  }
  .middel-box-item8 {
    background-color: rgba(67, 76, 114, 0.5);
  }
  .middel-box-inner {
    height: @height-item;
    span {
      margin-left: 20px;
      margin-right: 24px;
    }
  }
  .middel-box-inner1 {
    width: 70%;
    background-color: rgba(49, 98, 232, 0.6);
  }
  .middel-box-inner2 {
    width: 50%;
    background-color: rgba(41, 82, 194, 0.8);
  }
  .middel-box-inner3 {
    width: 40%;
    background-color: rgba(31, 62, 147, 0.8);
  }
  .middel-box-inner4 {
    width: 30%;
    background-color: rgba(19, 39, 92, 0.8);
  }
  .middel-box-inner5 {
    width: 40%;
  }
  .middel-box-inner6 {
    width: 50%;
    position: absolute;
    left: 0;
    padding-left: 50%;
    background-color: rgba(107, 117, 161, 0.9);
  }
  .middel-box-inner7 {
    width: 60%;
    position: absolute;
    left: 0;
    padding-left: 30%;
    background-color: rgba(118, 128, 171, 0.9);
  }
  .middel-box-inner8 {
    width: 60%;
    position: absolute;
    left: 0;
    padding-left: 20%;
    background-color: rgba(81, 90, 135, 0.8);
  }
}
